// 时间组件
import Picker from 'react-native-picker';
import React, { Component } from 'react'
import {
    View,
    Text,
    TouchableOpacity,
    Modal,
} from 'react-native';

import { public_Style as styles } from '../../../styles';
var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;

let data1 = [];
for (var i = 1970; i < 2018; i++) {
    data1.push(i);
}
let data2 = [];
for (var i = 1; i < 13; i++) {
    data2.push(i);
}
let data3 = [];
for (var i = 1; i < 25; i++) {
    data3.push(i);
}
let data = [
    { data1 }, { data2 }, { data3 }
]

Picker.init({
    pickerData: [data1, data2, data3],
    selectedValue: [1990, 6, 12], //默认值
    pickerConfirmBtnText: '确认',
    pickerConfirmBtnColor: [212, 17, 17, 1],
    pickerCancelBtnText: '取消',
    pickerCancelBtnColor: [1, 186, 245, 1],
    pickerTitleText: '选择日期',
    pickerTitleColor: [1, 186, 245, 1],
    pickerToolBarBg: [255, 255, 255, 1], //标题背景颜色
    pickerBg: [255, 255, 255, 1], //内容背景颜色
    wheelFlex: [1, 1, 1], //布局比例
    pickerFontColor: [0, 0, 0, 1], //选中颜色
    onPickerConfirm: data => { //确认触发
        console.log(data);
    },
    onPickerCancel: data => {   //取消触发
        console.log(data);
    },
    onPickerSelect: data => {   //选择触发
        console.log(data);
    }
});

export default class Timenew extends Component {

    
    
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            isModal: false,
        };
        this.Picker = Picker
    }

    showModal() {
        this.setState({
            isModal: true,
        })
        this.Picker.show();
    }

    onRequestClose() {
        return function(){
            
        }
        this.setState({
            isModal: false,
        });
    }

    render() {
        return (
            <View style={styles.container}>
                {/* 初始化Modal */}
                <Modal
                    animationType='fade'           // 从底部滑入
                    transparent={true}             // 透明
                    visible={this.state.isModal}    // 根据isModal决定是否显示
                    onRequestClose={() => { this.onRequestClose() }}  // android必须实现
                    >
                    <View style={{ flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.3)' }}>


                        <View style={[styles.modalViewStyle, { height: height * 0.3, width: width * 1 }]}>
                            {/* 关闭页面 */}
                            <TouchableOpacity
                                onPress={() => {
                                    {
                                        this.setState({
                                            isModal: false
                                        })
                                    }
                                }}>
                                <Text>关闭页面</Text>
                            </TouchableOpacity> 
                        </View>


                    </View>
                </Modal>

                {/* 返回按钮 */}
                <TouchableOpacity
                    onPress={() => {
                        {
                            this.props.navigator.pop()
                        }
                    }}>

                </TouchableOpacity>

                {/* 模态跳转 */}
                <TouchableOpacity
                    onPress={() => this.showModal()}>
                    <Text>选择日期</Text> 
                    {/* <Text onPress={()=>{this.go()}}>选择</Text> */}
                </TouchableOpacity>
            </View>
        );
    }
    go(){
        Picker.show();
    }
}